<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-popover="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>优惠券管理</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
    <script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">优惠券管理</h1>
            <div class="z-pop_question">
            </div>
        </div><!-- 页面头部 end -->

        <div class="list-content">
            <!--条件筛选-->
            <div class="content_item_filter clearfix" :class="[hasfilterMore?'content_filter_more':'']">
                <div class="input-select fl btn-radid_none">
                    <div class="filter-form filter-form-one clearfix">
                        <el-input placeholder="优惠券名称" v-model="conditions.couponName.value" clearable  class="minW40 z_input-holder" ></el-input>
                        
                        <el-select v-model="conditions.couponType.value" clearable placeholder="类型" class="z_select-holder">
                            <el-option
                                    v-for="couponType in couponTypeList"
									:key="couponType.value"
									:label="couponType.name"
									:value="couponType.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class='filter-form filter-form-more clearfix' v-show="filterMore"></div>
                    <div class="filter-operate">
                        <div class="filter-more" @click="toggleMoreSearch" v-show="hasfilterMore"><i :class="[filterMore?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
                        <el-tooltip class="item" content="查询" placement="bottom-start">
                            <el-button icon="el-icon-search" @click="handleQuery"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" content="清空" placement="bottom-start">
                            <el-button icon="el-extend-clean" @click="handleClear"></el-button>
                        </el-tooltip>
                    </div>
                </div>
                <div class="filter-btn fr">
                    <el-button type="primary" @click="addCoupon">新增优惠券</el-button>
                </div>
            </div>

            <!--主体表格-->
            <div class="z-tables">
                <el-table ref="multipleTable" :data="appList" style="width: 100%;">
                	<el-table-column fixed label="序号" type="index" class-name="z-opt_btn"></el-table-column>
                    <el-table-column prop="couponName" label="优惠券名称" min-width="120"></el-table-column>
                    <el-table-column prop="couponTypeName" label="类型" min-width="100"></el-table-column>
                    <el-table-column label="过期状态" min-width="80">
                   		<template slot-scope="scope">
                    		<template v-if="scope.row.overdue">
                            	已过期
                        	</template>
                        	<template v-else>
                            	未过期
                        	</template>
                        </template>
                    </el-table-column>
                    <el-table-column label="启用状态" min-width="80">
                   		<template slot-scope="scope">
                    		<template v-if="scope.row.state">
                            	已启用
                        	</template>
                        	<template v-else>
                            	已停用
                        	</template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="score" label="适用范围" min-width="100">
                    	<template slot-scope="scope">
                    		<template v-if="scope.row.couponType == '1'">
                            	全部菜品可用
                        	</template>
                        	<template v-else>
                            	{{scope.row.productName}}
                        	</template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="obtainTypeName" label="领取方式" min-width="100"></el-table-column>
                    <el-table-column prop="couponPrice" label="金额" min-width="80"></el-table-column>
                    <el-table-column prop="score" label="使用条件" min-width="120">
                    	<template slot-scope="scope">
                    		<template v-if="scope.row.couponType == '1'">
                            满{{scope.row.reachPrice}}元可用
                        </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="有效期" min-width="200" class-name="table-operate-td">
						<template slot-scope="scope">
							<div class="table-info">{{scope.row.startValidTime}} 至 {{scope.row.endValidTime}}</div>
							<div class="table-operate">
								<el-button type="primary" v-if="(!scope.row.overdue) && scope.row.state" @click="cancel(scope.row.uuid)">停用</el-button>
						        <el-button type="primary" @click="viewDetails(scope.row.uuid)">查看明细</el-button>
							</div>
						</template>
				    </el-table-column>
                </el-table>
            </div>

            <!--分页-->
            <div class="grid-content">
                <div class="bg-purple-light">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizeList"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalNum">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    app = new Vue({
        el: "#app",
        data: {
            loading: true,
            tableAllCheck: false,  // table 下方批量操作全选
            hasfilterMore: false,  // 列表是否拥有更多筛选条件
            filterMore: false,  // 列表更多筛选条件是否展示
            couponTypeList: [[${couponTypeList}]],
            conditions: {
                "vendorUuid": {
                    "operation": "EQ",
                    "value": [[${vendorId}]]
                },
                "customerUuid": {
                    "operation": "EQ",
                    "value": [[${customerId}]]
                },
                "couponType": {
                    "operation": "EQ",
                    "value": ""
                },
                "couponName":{
                    "operation": "LIKE",
                    "value": ""
                }
            },
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
            appList:[]
        },
        created: function () {
            queryList(this);
        },
        methods: {
            handleSizeChange: function (val) {
                this.pageSize = val;
                queryList(this);
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                queryList(this);
            },
            handleQuery() {
                this.currentPage = 1;
                queryList(this);
            },
            handleClear() {
                this.conditions.couponName.value = "";
                this.conditions.couponType.value = "";
            },
            // 停用
            cancel(uuid) {
                let self = this;
                self.$confirm('确认要停用?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    $.ajax({
                        url: "/vendor/cater/coupon/updateState",
                        type: "POST",
                        data: {uuid:uuid,state:false},
                        dataType: "json",
                        success: function (data) {
                            if (data && data.returnCode === 1) {
                                self.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    customClass: 'message-center',
                                    duration: 1500,
                                });
                                self.handleQuery();
                            } else {
                                self.$message({
                                    message: data.returnNote,
                                    type: 'warning',
                                    customClass: 'message-center',
                                    duration: 1500,
                                });
                            }
                        }
                    });
                });
            },
            viewDetails(uuid) {
            	window.location.href = "/vendor/cater/coupondetail/tolist?couponUuid="+uuid;
            },
            toggleMoreSearch() {
                this.filterMore = !this.filterMore;
            },
            addCoupon:function(){
            	window.location.href = "/vendor/cater/coupon/toadd";
            }
        }
    });

    function queryList(app) {
        app.loading = true;
        let queryMessage = {
            "queryPage": app.currentPage,
            "pageShow": app.pageSize,
            "queryParams": app.conditions,
            "sortMap": {
                "createTime": "desc"
            }
        };
        $.ajax({
            url: "/vendor/cater/coupon/listAndProductName",
            type: "POST",
            data: JSON.stringify(queryMessage),
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            success: function (data) {
                if (data && data.returnCode === 1) {
                    app.appList = data.returnMessage;
                    app.totalNum = data.pager.totalNum;
                }
                app.loading = false;
            }
        });
    }
</script>
</html>